<style lang="scss" scoped>
  .common_status {
    display: flex;
    align-items: center;
    justify-content: center;
    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      margin-right: 10px;
    }
  }
</style>

<template>
  <div class="common_status" :style="textStyle">
    <span class="dot" :style="dotStyle"></span>
    {{ text }}
  </div>
</template>

<script setup>
import { computed } from 'vue'
const colorMap = {
  'success': 'rgb(15, 137, 172)',
  'error': '#f56c6c'
}
const props = defineProps({
  type: {
    type: String,
    default: 'success'
  },
  text: {
    type: String,
    default: '正常'
  }
})
const dotStyle = computed(() => {
  return { background: colorMap[props.type]}
})
const textStyle = computed(() => {
  return { color: colorMap[props.type]}
})
</script>